<template>
<div>
        <!-- 顶部 -->
    <div>
      <van-nav-bar
        title="星座配对"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
      </van-nav-bar>
    </div>
    
    <!-- 通知栏 -->
        <van-notice-bar
            left-icon="volume-o"
            text="温馨提示：娱乐而已，不可太迷信"
        />

    <!-- 内容 -->
    <div class="centent">
        <div class="input">
             <div class="men">
            <label for="">men:</label>
            <input type="text" v-model="men" placeholder="白羊">
        </div>
        <div class="women">
            <label for="">women:</label>
            <input type="text" v-model="women" placeholder="天蝎">
        </div>
        <div class="startConsell">
            <button @click="pair">开始配对</button>
        </div>
        </div>
       
        
        <div v-if="flag" class="result">
            <p><span>结果：</span>{{constellList.jieguo}}</p>
            <p><span>指数：</span>{{constellList.zhishu}}</p>
            <p><span>恋爱：</span>{{constellList.lianai}}</p>
            <p><span>注意：</span>{{constellList.zhuyi}}</p>
        </div>
        
    </div>

        
        
        
</div>
</template>
<script>
import { constell } from '../api/api'
import { Toast } from 'vant';
export default {
    name:"constell",
    data(){
        return{
            men:"",
            women:"",
            constellList:{},
            flag:false,
        }
    },
    // created(){
    //     constell(this.men,this.women).then(res=>{
    //         console.log(res);
    //     })
    // },
    methods:{
        pair(){
          constell(this.men,this.women).then(res=>{
            console.log(res);
            this.constellList=res.result;
            if(res.error_code==0){
                this.flag=true;
                console.log(this.constellList.zhuyi);
            }
            else{
                Toast({
                    message: '输入有误',
                    icon: 'cross',
                });
            }
            
        })  
        },
        onClickLeft() {
      this.$router.back;
      window.history.go(-1);
    },
    onClickRight() {}
    },
}
</script>
<style scoped lang="less">
.result>p>span {
    font-weight: 600;
}
.centent {
    
    margin: auto;
    margin-top: 20px;
    width: 88%;
}
.input {
    text-align: center;
}
.men {
    margin-bottom: 16px;
    padding-top: 2px;
}
.women {
    margin-bottom: 16px;
}
.startConsell {
    text-align: center;
}
// 顶部
/deep/.van-nav-bar__content {
  background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-button--info {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
/deep/.van-field__label {
  width: 3.2em;
}
</style>
